import React, { Component } from "react";
import { connect } from "dva";
import Message from "./components/Message";
import Push from "./components/Push";
import styles from "./MessagePage.less";

@connect(stores => ({
  messageData: stores.message
}))
class SituationPage extends Component {
  state = {
    self: true,
    common: false,
    pageNum: 1,
    pageSize: 10,
    stateRead: [""],
    grade: [""],
    pushResultCode: [""],
    planName: "",
    sceneName: "",
    channel: "",
    department: "",
    startTime: "",
    endTime: "",
    ascOrDesc: "desc",
    value: ""
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const {
      stateRead,
      grade,
      pushResultCode,
      planName,
      sceneName,
      channel,
      department,
      startTime,
      endTime,
      ascOrDesc,
      value
    } = this.state;
    const temp = {
      stateRead: stateRead[0],
      grade: grade[0],
      pushResultCode: pushResultCode[0],
      planId: planName,
      sceneTemplateId: sceneName,
      pushChannelId: channel,
      ownerDept: department,
      timeCreateStart: startTime,
      timeCreateEnd: endTime,
      ascOrDesc,
      queryCondition: value
    };
    dispatch({
      type: "message/getDepart",
      payload: { pageNum: "1", pageSize: "10000", ...temp }
    });
    dispatch({
      type: "message/messageList",
      payload: {
        pageNum: 1,
        pageSize: 10,
        ...temp
      }
    });
  }

  change = e => {
    if (e === "self") {
      this.setState({
        self: true,
        common: false
      });
    } else {
      this.setState({
        self: false,
        common: true
      });
    }
  };

  onChange = (planName, sceneName, channel, department, timeCreate) => {
    this.setState({
      planName: !planName ? "" : planName,
      sceneName: !sceneName ? "" : sceneName,
      channel: !channel ? "" : channel,
      department: !department ? "" : department,
      startTime: !timeCreate ? "" : timeCreate[0].format("YYYY-MM-DD HH:mm:ss"),
      endTime: !timeCreate ? "" : timeCreate[1].format("YYYY-MM-DD HH:mm:ss"),
      pageNum: 1
    });
  };

  handleTableChange = (e, filters, sorter) => {
    const { current, pageSize } = e;
    const { grade, stateRead, pushResultCode } = this.state;
    this.setState(
      {
        pageNum:
          (filters.grade && filters.grade !== grade) ||
          (filters.stateRead && filters.stateRead !== stateRead) ||
          (filters.pushResultCode && filters.pushResultCode !== pushResultCode)
            ? 1
            : current,
        pageSize,
        ascOrDesc: sorter.order && sorter.order === "ascend" ? "asc" : "desc",
        grade: filters.grade ? filters.grade : [""],
        stateRead: filters.stateRead ? filters.stateRead : [""],
        pushResultCode: filters.pushResultCode ? filters.pushResultCode : [""]
      },
      () => {
        this.sendReq();
      }
    );
  };

  sendReq = () => {
    const { dispatch } = this.props;
    const {
      planName,
      sceneName,
      startTime,
      endTime,
      channel,
      department,
      stateRead,
      grade,
      pushResultCode,
      ascOrDesc,
      pageNum,
      pageSize,
      value
    } = this.state;
    const temp = {
      planId: planName,
      sceneTemplateId: sceneName,
      pushChannelId: channel,
      ownerDept: department,
      timeCreateStart: startTime,
      timeCreateEnd: endTime,
      stateRead: stateRead[0] && stateRead[0] !== "" ? stateRead[0] * 1 : "",
      grade: grade[0] && grade[0] !== "" ? grade[0] * 1 : "",
      pushResultCode:
        pushResultCode[0] && pushResultCode[0] !== ""
          ? pushResultCode[0] * 1
          : "",
      ascOrDesc,
      queryCondition: value
    };
    dispatch({
      type: "message/messageList",
      payload: {
        pageNum,
        pageSize,
        ...temp
      }
    });
    dispatch({
      type: "message/getDepart",
      payload: { pageNum: "1", pageSize: "10000", ...temp }
    });
  };

  onSearch = value => {
    this.setState(
      {
        value
      },
      () => {
        this.sendReq();
      }
    );
  };

  render() {
    const { self } = this.state;
    const { history } = this.props;
    const { messageData } = this.props;
    const { messageList = [], totalCount = 0, loading = false } = messageData;
    return (
      <div className={styles.root}>
        <div className={styles.topSearch}>
          {/* <div className={styles.search}>
            <Search
              placeholder="推送目标"
              enterButton="搜索"
              size="default"
              style={{ width: 410 }}
              onSearch={this.onSearch}
            />
          </div> */}
          <div className={styles.tab}>
            <span
              className={self ? styles.tabpane : styles.notSelect}
              onClick={() => this.change("self")}
            >
              推送
            </span>
            {/* <span
              className={common ? styles.tabpane : styles.notSelect}
              onClick={() => this.change("common")}
            >
              消息
            </span> */}
          </div>
        </div>
        <div className={styles.secbody}>
          {self ? (
            <Message
              history={history}
              onChange={(
                planName,
                sceneName,
                channel,
                department,
                timeCreate
              ) =>
                this.onChange(
                  planName,
                  sceneName,
                  channel,
                  department,
                  timeCreate
                )
              }
              handleTableChange={(e, filters, sorter) =>
                this.handleTableChange(e, filters, sorter)
              }
              stateRead={this.state.stateRead}
              pushResultCode={this.state.pushResultCode}
              grade={this.state.grade}
              ascOrDesc={this.state.ascOrDesc}
              pageNum={this.state.pageNum}
              pageSize={this.state.pageSize}
              value={this.state.value}
              messageList={messageList}
              totalCount={totalCount}
              loading={loading}
              planName={this.state.planName}
              sceneName={this.state.sceneName}
              channel={this.state.channel}
              department={this.state.department}
              startTime={this.state.startTime}
              endTime={this.state.endTime}
              onSearch={this.onSearch}
            />
          ) : (
            <Push history={history} />
          )}
        </div>
      </div>
    );
  }
}

export default SituationPage;
